<template>
	<view class="box">
		<radio-group @change="radioChange" class="radio_group">
			<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
				style="display: flex;">
				<view>
					<radio :value="item.value"  />
				</view>
				<view>{{item.name}}</view>
			</label>
		</radio-group>
		<view class="text_box">
			<textarea  maxlength="500" v-model="form.content" auto-height placeholder="请填写具体内容帮助我们了解您的意见和建议 " class="textear_item" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" focus placeholder="请填写您的QQ" v-model="form.qq" />
			<input class="uni-input" focus placeholder="请填写您的微信" v-model="form.weixin" />
		</view>
		<view class="">
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import api from '../../api/feedback.js'
	export default {
		data() {
			return {
				items: [{
						value: '1',
						name: '内容意见'
					},
					{
						value: '2',
						name: '产品建议'
					},
					{
						value: '3',
						name: '其他'
					}
				],
				current: 0,
				form:{
					qq:'',
					weixin:'',
					content:'',
					type:''
				}
					
				
			}
		},
		methods: {
			radioChange: function(event) {
				this.form.type = event.detail.value				
			},
			submit(){
				//正则判断
				if(!this.form.content ||this.form.content.trim().length<10){
					uni.showToast({
					    title: '提交的内容至少10个字',
					    duration: 2000
					});
					return					
				}
				if(!this.form.qq && !this.form.weixin){
					uni.showToast({
					    title: 'qq和微信至少填写一个',
					    duration: 2000
					});
					return					
				}
				 // 如果qq不为空，则校验是否合法
				  if( this.form.qq && !this.$util.checkStr(this.form.qq, 'QQ')) {
				  this.$util.msg('QQ填写有误')
				  return
				  }
				  
				  // 如果微信不为空，则校验是否合法
				  if( this.form.weixin
				  && !/^[a-zA-Z][a-zA-Z\d_-]{5,19}$/.test(this.form.weixin) ) {
				  this.$util.msg('微信填写有误')
				  return
				  } 
				this.getFeed()
			},
			// 获取反馈接口
			async getFeed(){
				let res=await api.getFeedback(this.form);
				console.log(res)
				this.showInfo()
				
			},
		showInfo(){
			uni.showModal({
			    title: ' ',
				showCancel:false,
			    content: '您的意见反馈成功',
			    success: function (res) {
			        if (res.confirm) {
			            console.log('用户点击确定');
			        } 
			    }
			});
		}
		},
		onLoad() {
			
		},
		components: {

		}
	}
</script>

<style lang='scss'>
	.box {
		padding: 12px
	}

	.radio_group {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.text_box {
		width: 100%;
		height: 140px;
		border: 1px solid #ddd;
		margin: 10px 0;

		.textear_item {
			width: 100%;
			height: 100%;
		}
	}

	.uni-form-item {
		margin: 20px 0px;

		.uni-input {
			border: 1px solid #ddd;
			height: 40px;
			margin-top: 20px;
			padding-left: 5px;
		}
	}
</style>
